<template>
    <div>
        <!-- <h2>停车位管理</h2> -->
        <SearchAddSpace @editConfirm="editConfirm" />
        <Table :tableData="tableData" :options="options" @row-edit="rowEdit" @row-del="rowDel"></Table>
        <!-- 分页 -->
        <!-- <el-pagination background layout="prev, pager, next" :total="total" /> -->
        <el-pagination v-model:page-size="pageSize" v-model:current-page="page" layout="prev, pager, next" :total="total"
            background="skyblue" />
            <UpdateParkingSpace/>
    </div>
</template>

<script setup lang="ts">
import Table from "../../components/table/index.vue"
import UpdateParkingSpace  from "./components/updateParkingSpace.vue";
import SearchAddSpace from "@v/SearchAddSpace/index.vue"
import { ref, reactive, onMounted, watch } from "vue";
import { fetchParking, delParkingSpace } from "@a/index"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import useSpaceStore from "@/stores/ParkingSpace";
const spaceStore= useSpaceStore()
const router = useRouter()
const options = reactive({
    // 定义当前 table 表格的表头数据
    column: [
        {
            prop: 'createAt',
            label: '#',
            width: 120
        },
        {
            prop: 'id',
            label: '停车位编号',
            width: 100
        },
        {
            prop: 'partName',
            label: '所属停车场',
            // width:120
        },
        {
            prop: 'price',
            label: '所属道路',
            width: 120
        },
        {
            prop: 'desc',
            label: '所属区域',
            width: 200
        },
        {
            prop: 'sale',
            label: '停车位状态',
            // width: 120
        },
        {
            prop: 'onsale',
            label: '停车位属性',
            // width: 120
        }


    ],
    // 定义当前 table 表格的操作栏的状态
    // 是否存在 操作栏
    Operation: true,
    // 操作栏的标题
    OperateTitle: "操作选项",
    // 操作栏的宽度
    OperateWidth: 180,
    // 操作栏是否固定
    OperateFixed: true

})
// 点击编辑表格数据的方法
const rowEdit = (type: number, row: object) => {
    console.log('edit - 接口 参数是当前的id ,', type, row)
    spaceStore.toggleAddShowState()
}

// 分页
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 定义表格数据
const tableData: any = ref()

// 获取停车位表格数据
const getParking = () => {
    fetchParking({
        // ...parkingSpace,
        ...val2,
        page: page.value,
        pageSize: pageSize.value
    })
        .then(res => {
            // console.log(res);
            if (res.data.code === 200) {
                tableData.value = res.data.data.lists
                total.value = res.data.data.total
                //    console.log( tableData.value);

            }
        })
}

// 点击删除表格数据的方法
const rowDel = (index: number, row: object) => {
    // console.log('del - 接口 参数是当前的id ,', index, row)
    delParkingSpace(index).then(res => {
        console.log(res);
        if (res.data.code === 200) {
            ElMessage({
                type: 'success',
                message: res.data.msg,
                duration: 2000,
                onClose:() => {
                   router.go(0)
                 } 
            })
        }

    })

}
// 搜索
let val2: any = null
const editConfirm = (val: any) => {
    console.log(val)
    val2 = val
    getParking()
       router.go(0)
}

// 分页
watch(page, () => {
    getParking()
},
    { immediate: true }
);
watch(pageSize, () => {
    getParking()
},
    { immediate: true }
);
onMounted(() => {
    getParking()
})
</script>

<style scoped lang="scss">
.el-table_1_column_5 {
    width: 120px;
    background-color: #a84d4d;
    flex-wrap: nowrap;
    overflow: hidden;
}

.el-pagination {
    margin-top: 50px;
}
</style>